<template>
    <el-input v-model="state.phoneNumber" placeholder="请输入手机号" >
        <template #prepend>
            <el-select v-model="state.country" placeholder="Select" filterable style="width: 115px" >
                <el-option 
                    v-for="item in countryCode.countryCode" 
                    :key="item.code"
                    :label="item.code" 
                    :value="item.code" >
                    <span style="float: left">{{ item.code }}</span>
                    <span
                        style="
                        float: right;
                        color: var(--el-text-color-secondary);
                        font-size: 14px;
                        "
                        >{{ item.cn }}</span>
                </el-option>
            </el-select>
        </template>
    </el-input>
</template>

<script lang="ts">

import { defineComponent, reactive,computed } from 'vue';
import countryCode from './countryCode'

export default defineComponent({
    props: {
        phoneNumber: {
            type: String,
            default: () => '',
        },
        country: {
            type: String,
            default: () => '',
        },
    },
    setup(props: any) {
        let state = reactive({
            phoneNumber: props.phoneNumber,
            country: props.country
        });
        
        return {
            state,
            countryCode
        }
    },
})
</script>